 <template> 
    <div class="recipe-list">
        <div class="head clear-both group">
            <div class="head-img float-left">
                <image  class="img"  mode="aspectFit"  src="https://rqys.hleason.com/dist/images/q-nav03.png"  ></image>
                <div class="describe">
                  <p class="title">{{item.doctor.name}}</p>
                  <p class="text-info">{{item.create_time}}</p>
                </div>
            </div> 
            <div class="head-state float-right">{{item.statusTxt}}</div>
        </div>
        <div class="drug group" v-if="item.content">  {{item.content}} </div>
        <div class="footer clear-both ">
            <div class="float-left total">
                合计<view class="price"><a>￥</a>{{item.amount}}</view>
                <span v-if="item.freight">(含运费：￥{{item.freight}})</span>
            </div> 
            <div class="btn float-right" v-if="item.status==1" @click="detailItem(item,1)">去支付</div>
            <div class="btn float-right" v-else @click="detailItem(item,2)">查看详情</div>
        </div>
    </div> 
</template>

<script>
export default {
    props: {
        item:{
            default:{},
            type:Object
        } 
    },
    methods:{
        detailItem(item,val){
            this.$emit('detail-item',item,val);
        },
    },
}
</script>

<style scoped lang="scss">
.recipe-list{ 
    padding:10rpx 25rpx;
    margin-bottom:20rpx;
    box-sizing:border-box;
    background:#fff;
    border-radius:10rpx;
    .group{
        padding:20rpx 0;
        box-sizing:border-box;
        border-bottom:1rpx solid #E0E0E0;
    }
    .head{   
        .head-img{ 
            display: flex;
            justify-content:center;
            align-items:Center; 
            .img{
                width:80rpx;
                height:80rpx;
                border:0;  
            }
            .describe{ 
                display:inline-block; 
                margin-left:18rpx;
                .title{
                    font-size:28rpx;
                    color:#333; 
                }
                .text-info{
                    margin-top:6rpx;
                    font-size:24rpx;
                    color:#CBCAC9;
                }
            }
        }
        .head-state{
            font-size:30rpx;
            color:#CD4640;
            line-height:80rpx;
        }
    }
    .drug{
        font-size:28rpx;
        color:#333;
    }
    .footer{
        padding:20rpx 0;
        .total{
            font-size:27rpx;
            color:#333;
            .price{
                display:inline-block;
                margin:0 10rpx;
                font-size:32rpx;
                color:#CD4640;
                a{
                    display:inline-block;
                    font-size:24rpx;
                }
            }
        }
        .btn{
            padding:8rpx 30rpx;
            font-size:28rpx;
            color:#fff;
            background:#CD4640;
            border-radius:10rpx;
            &:active{
                background-color:rgba(205,70,64,0.5)
            }
        }
    }
}
</style>
